<template>
	<Header />
	<router-view v-if="isRouterAlive" v-slot="{ Component }">
		<!-- <transition> -->
		  <!-- <keep-alive> -->
				<component :is="Component"></component>
			<!-- </keep-alive> -->
		<!-- </transition> -->
	</router-view>
</template>

<script setup>

	import { ref, nextTick, provide, readonly, onBeforeMount, onBeforeUnmount } from 'vue';
	import Header from '@/components/base/header';
	import { rootApp } from '@/constant/provideSymbol';

	const isRouterAlive = ref(true);

	function reload() {
		isRouterAlive.value = false;
		nextTick().then(() => isRouterAlive.value = true);
	}

	provide(rootApp, readonly({
		reload
	}))

</script>

<style lang="scss">
	
	#app {
		width: 100vw;
		height: 100vh;
		overflow: hidden overlay;
		background: #f9f9f9 center center / 1.4rem 1.4rem repeat url();
	}
	
</style>
